<template>
    <div class="personIndexSet">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item>标准管控</el-breadcrumb-item>
            <el-breadcrumb-item>标准管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/expandCustomerIndexSet' }">拓客指标设置</el-breadcrumb-item>
            <el-breadcrumb-item>{{areaName}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" class="demo-form-inline" size="small">
            <el-form-item label="片区：">
                <el-select v-model="regionId" placeholder="请选择">
                    <el-option
                            v-for="item in regionList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="total">
            <div>
                {{areaName}}/{{regionNameCompu}} -- {{year}}年 -- {{standardType==1?'拜访量':'拓店量'}}汇总
            </div>
            <div class="total-content">
                <div class="total-item">{{standardType==1?'拜访量':'拓店量'}}指标：{{total.allCount}}</div>
                <div class="total-item">已分配指标：{{total.allocated}}</div>
                <div class="total-item">待分配指标：{{total.unallocated}}</div>
                <div class="total-item"></div>
            </div>
        </div>
        <div style="margin-top: 20px;">
            <el-button type="primary" size="small" @click="fn('add')">新增</el-button>
            <el-button size="small" @click="importHandle">导入</el-button>
        </div>
        <el-table :data="tableData" border style="margin-top: 20px;">
            <el-table-column prop="userName" label="姓名"></el-table-column>
            <el-table-column prop="phone" label="手机号" min-width="110px"></el-table-column>
            <el-table-column prop="summary" label="汇总指标"></el-table-column>
            <el-table-column prop="january" label="1月份"></el-table-column>
            <el-table-column prop="february" label="2月份"></el-table-column>
            <el-table-column prop="march" label="3月份"></el-table-column>
            <el-table-column prop="april" label="4月份"></el-table-column>
            <el-table-column prop="may" label="5月份"></el-table-column>
            <el-table-column prop="june" label="6月份"></el-table-column>
            <el-table-column prop="july" label="7月份"></el-table-column>
            <el-table-column prop="august" label="8月份"></el-table-column>
            <el-table-column prop="september" label="9月份"></el-table-column>
            <el-table-column prop="october" label="10月份"></el-table-column>
            <el-table-column prop="november" label="11月份"></el-table-column>
            <el-table-column prop="december" label="12月份"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope='scope'>
                    <el-button type="text" @click="fn('edit',scope.row)" :disabled="year < currentYear">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next,jumper"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="totalSize">
            </el-pagination>
        </div>
    </div>
</template>

<script>

export default {
    name:"personIndexSet",
    created() {
        this.currentYear = new Date().getFullYear()

        this.areaName = this.$route.query.areaName ? this.$route.query.areaName:'个人指标设置'
        this.areaId = this.$route.query.areaId
        this.regionId = +this.$route.query.regionId
        this.regionName = this.$route.query.regionName
        this.year = this.$route.query.year
        this.standardType = this.$route.query.standardType
        this.$axios.get('/cms/sys/region/getRegion/'+this.areaId).then(res=>{
            this.regionList = res
        })
        this.searchList()
    },
    mounted() {},
    components: {},
    data() {
        return {
            areaId: '',
            areaName: '',
            regionId: '',
            year: '',
            standardType: '',//指标
            regionList: [],
            total: {},
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            totalSize: 0,
            currentYear: ''
        }
    },
    methods: {
        searchList () {
            let param = {}
            param.rangeType = 2
            param.pageNum = this.currentPage
            param.pageSize = this.pageSize
            param.areaId = this.areaId
            param.regionId = this.regionId
            param.standardType = this.standardType
            param.year = +this.year
            this.$axios.post('/spread/standard/list', param).then(res => {
                this.tableData = res.pageInfo.list
                this.totalSize = res.pageInfo.total
                if(param.standardType==1){
                    this.total = res.visitMap ? res.visitMap : {}
                } else {
                    this.total = res.standardMap ? res.standardMap : {}
                }
            })
        },
        // 分页器改变页码
        handleCurrentChange () {
            this.searchList()
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.searchList()
        },
        fn(type,row){
            if(type=='add'){
                this.$router.push({path: '/personIndexSetOp',
                    query: {
                        type: 'add',
                        areaId:this.areaId,
                        areaName:this.areaName,
                        regionId:this.regionId,
                        regionName: this.regionName,
                        year:this.year,
                        standardType:this.standardType,
                    }
                })
            } else if(type=='edit'){
                this.$router.push({path: '/personIndexSetOp',
                    query: {
                        type: 'edit',
                        id: row.id,
                        areaId:this.areaId,
                        areaName:this.areaName,
                        regionId:this.regionId,
                        regionName: this.regionName,
                        year:this.year,
                        standardType:this.standardType,
                    }
                })
            }
        },
        importHandle(){
            this.$router.push({path: '/personIndexSetImp',query: {
                    areaId:this.areaId,
                    areaName:this.areaName,
                    regionId:this.regionId,
                    regionName: this.regionName,
                    year:this.year,
                    standardType:this.standardType,
                }})
        }
    },
    computed: {
        regionNameCompu(){
            let region = this.regionList.find(item=>{
                return item.id == this.regionId
            })
            return region?region.name:''
        }
    }
}
</script>
<style lang="stylus" scoped>
    .personIndexSet {
        .total{
            border: 1px solid #EBEEF5;
            border-radius: 4px;
            padding: 20px;
            .total-content{
                display: flex;
                .total-item{
                    flex:1;
                }
            }
        }
    }
</style>
